<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表的过滤</title>
</head>
<body>
<div id="app">
    <input type="text" placeholder="请输入过滤的插件" v-model="keyword">
    <ul>
        <li v-for="(person,index) in newPersons" :key="person.id">
            {{person.id}}----{{ person.name }}----{{person.age}}
        </li>
    </ul>
<!--    <button @click="test(1)">按年龄升序</button>-->
<!--    <button @click="test(2)">按年龄降序</button>-->
<!--    <button @click="test(0)">按原样排序</button>-->
        <button @click="sortType=1">按年龄升序</button>
        <button @click="sortType=2">按年龄降序</button>
        <button @click="sortType=0">按原样排序</button>
</div>
<script src="js/vue.js"></script>
<script>
    Vue.config.productionTip=false;//设置为 false 以阻止 vue 在启动时生成生产提示。
    const vm=new Vue({
        el:"#app",
        data(){
            return {
                keyword:"",
                persons:[
                    {id:1,name:'zhaoliying',age:33},
                    {id:2,name:'yangmi',age:34},
                    {id:3,name:'qiwei',age:30},
                    {id:4,name:'dilireba',age:20}
                ],
                //
                sortType:0 //0代表原样 1代表升序 2代表降序
            }
        },
        // methods:{
        //     test(num) {
        //         this.sortType=num;
        //     }
        // },
        computed:{
            newPersons(){
                //从vm身上获取keyword和persons
                let {keyword,persons,sortType}=this;
                console.log(this);
                //根据获取的这两个数据计算新的数据
                //函数和方法的三要素
                //功能
                //参数
                //返回值

                //不是箭头函数
                // let  arr=persons.filter(function (item,index){
                //     return item.name.indexOf(keyword)!==-1;
                // });
                //箭头函数
                let arr=persons.filter(item=>item.name.indexOf(keyword)!==-1);
                //在过滤的基础上进行排序后返回
                if (sortType!==0){
                    arr.sort((a,b)=>sortType===1? a.age-b.age:b.age-a.age);
                }
                return arr;
            }
        }
    });
</script>
</body>
</html>